<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link href="<s:url value="/css/style.css"/>" rel="stylesheet"
			type="text/css" />
		<script type="text/javascript"
			src="<s:url value="/js/jquery-1.3.2.min.js"/>"></script>
		<script type="text/javascript"
			src="<s:url value="/js/jquery-ui-1.7.2.custom.min.js"/>"></script>
		<script type="text/javascript"
			src="<s:url value="/js/jquery.scrollfollow.js"/>"></script>
		<script type="text/javascript"
			src="<s:url value="/js/jquery.Hscrollfollow.js"/>"></script>
		<script type="text/javascript"
			src="<s:url value="/js/jquery-ui-Draggable.1.7.1.js"/>"></script>
		<script type="text/javascript"
			src="<s:url value="/js/jquery.blockUI.js"/>"></script>
		<script type='text/javascript'
			src="<s:url value="/js/autocomplete/jquery.bgiframe.min.js"/>"></script>
		<script type='text/javascript'
			src="<s:url value="/js/autocomplete/jquery.ajaxQueue.js"/>"></script>
		<script type='text/javascript'
			src="<s:url value="/js/autocomplete/thickbox-compressed.js"/>"></script>
		<script type='text/javascript'
			src="<s:url value="/js/autocomplete/jquery.autocomplete.js"/>"></script>
		<link rel="stylesheet" type="text/css"
			href="<s:url value="/js/autocomplete/jquery.autocomplete.css"/>" />
		<link rel="stylesheet" type="text/css"
			href="<s:url value="/js/autocomplete/thickbox.css"/>" />
		<script type="text/javascript">
		var lasttdid="";
		var lastentityid="-1";
		function doSelect(tdid,date,time,teacherid,teacher) {
    	    if (lasttdid){ //不是空的    
		       if (lastentityid==-1){
		          $("#"+lasttdid).css("background-color","#FFFFFF");
		       }else {
		         $("#"+lasttdid).css("font-weight","normal");
		       }
		    };
		    lastentityid=$("#"+tdid).attr("entityid");
		    lasttdid=tdid;
		    $("#seldate").val(date) ;
		    $("#seltime").val(time);
		    $("#selteacherid").val(teacherid);
		    $("#selteacher").val(teacher);
		    if (lastentityid==-1){
		       $("#"+tdid).css("background-color","#7CFC00");
		       $("#entityid").val("");
		       $("#infolabel").html("");
		    }else {
		       $("#"+tdid).css("font-weight","bolder");
		       $("#entityid").val(lastentityid);
		       $("#infolabel").html($("#"+tdid).attr("title"));
		     }
 	    };
 	    function doSave(){    
             var  classtypeid=$("#classtype option:selected").val();
             var  classfocusid=$("#classfocus option:selected").val();
             var  classroomid=$("#classroom option:selected").val();
             if (!$("#seldate").attr('value')
                 ||!$("#seltime").attr('value')
                 ||!$("#selteacherid").attr('value')
                 ||!classtypeid
                 ||!classfocusid
                 ||!classroomid){
                 alert("please full the all info");
                 return;
             }
             //$.blockUI({ css: { 
             //      border: 'none', 
             //       padding: '15px', 
             //       backgroundColor: '#000', 
             //       '-webkit-border-radius': '10px', 
             //       '-moz-border-radius': '10px', 
             //       opacity: .5, 
             //       color: '#fff' 
             // }});  
             var url = "<s:url value="/academic/ClassArrange/doArrange.action"/>";
             var params = {
                entityid:$("#entityid").val(),
                date:$("#seldate").attr('value'),
		        time:$("#seltime").attr('value'),
		        teacherid:$("#selteacherid").attr('value'),
		        classtypeid:classtypeid,
		        classfocusid:classfocusid,
		        classroomid:classroomid,
		        topic:$("#topic").attr('value')
             };
             jQuery.post(url, params, callbackFun);
          };
          function doDelete() {    
             var entityid=$("#entityid").attr('value');
             if (!entityid){
                 alert("please select one class!");
                 return;
             }
             if(!confirm('are you sure delete this class ?')){
		         return;
	         }
             //$.blockUI({ css: { 
            //        border: 'none', 
            //        padding: '15px', 
            //        backgroundColor: '#000', 
            //        '-webkit-border-radius': '10px', 
           //         '-moz-border-radius': '10px', 
           //         opacity: .5, 
           //        color: '#fff' 
            //    } });  
             var url = "<s:url value="/academic/ClassArrange/deleteArrange.action"/>";
             var params = {
                entityid:$("#entityid").attr('value')
             };
             jQuery.post(url, params, callbackFun);
          };
         function callbackFun(data) {
             //setTimeout($.unblockUI, 10); 
             $(data).find('response').each(function(){
                  var err=$(this).children("errorinfo").text();
                  if (err){
                      alert(err);
                      return;
                  }
                  lastentityid=$(this).children("entityid").text();
                  if (lastentityid==-1){
                     $("#entityid").val("");
                  }else{
                     $("#entityid").val($(this).children("entityid").text());
                  }
		          $("#topic").val($(this).children("topic").text());
		   		  if (lasttdid){ //不是空的    
		              $("#"+lasttdid).html($(this).children("info").text());
		              $("#"+lasttdid).attr("title",$(this).children("infoall").text());
		              $("#"+lasttdid).attr("entityid",$(this).children("entityid").text());
		              $("#"+lasttdid).css("background-color",$(this).children("color").text());
		           } 
       　　　　　　 });
 　　　      };
        $().ready( function ()
		 {
		   $( '#topdiv' ).scrollFollow(
				{
					speed: 1,
					offset:0 
				}
			);
			$( '#leftdiv' ).HscrollFollow(
				{
					speed: 1,
					offset:0 
				}
			);
			$('#floatdiv').draggable();
 	 	    $("#classtype").change(function(){
                  var  ctid=$("#classtype option:selected").val();
                  var url = "<s:url value="/academic/ClassArrange/selectClassTypeAjax.action"/>";
                  var params = {
                      classtypeid:ctid
                  };
                  jQuery.post(url, params, callbackSelectTypeFun);
             });
              $("#classfocus").change(function(){
                  var  topic=$("#classfocus option:selected").attr("title");
                  $("#topic").val(topic);
             });
         });
         function callbackSelectTypeFun(data){
              $('#classfocus').empty()
                          .append('<option id="">---select---</option>')
                          .find('option:first')
                          .attr("selected","selected")
              $('#classroom').empty()
                         .append('<option id="">---select---</option>')
                         .find('option:first')
                         .attr("selected","selected")
              $(data).find('response>focus').each(function(){
                  var d=eval("("+$(this).text()+")"); 
                  var toption="<option value='"+d.id+"'  title='"+d.topic+"'>"+d.name+"</option>";
                  $('#classfocus').append(toption);
       　　　　　　 });
              $(data).find('response>room').each(function(){
                  var d=eval("("+$(this).text()+")"); 
                  var toption="<option value='"+d.id+"'>"+d.name+"</option>";
                  $('#classroom').append(toption);
       　　　　　　 });
 　　　      };
 		var clsTagName = "className";
	    if (window.ActiveXObject){
	       clsTagName = "className";
	    }else if (document.getBoxObjectFor){
	       clsTagName = "class";
	    }
		function selDatePanel(panelId) {
			$('#'+panelId).attr(clsTagName,'tablecolour11');
		}
		function unselDatePanel(panelId) {
			$('#'+panelId).attr(clsTagName,'tablecolour10');
		}
</script>
<style type="text/css">
#tdwithtooltip {
	cursor: pointer;
}

#simpleTooltip {
	padding: 7px;
	border: 1px solid #A6A7AB;
	background: #F2F3F5;
}

#topdiv {
	position: absolute;
	z-index: 2;
	width:<s:property value="teachers.size()*101+160"/>px;
	height: 39px;
	background-color: #fff;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	border: 0px solid #42CBDC;
}

#leftdiv {
	position: absolute;
	top: 39px;
	z-index: 1;
	margin: 0px;
	width: 160px;
	
	background-color: #fff;
	padding: 0px 0px 0px 0px;
	border: 0px solid #42CBDC;
}

#floatdiv {
	position: fixed;
	left: 400px;
	top: 100px;
	z-index: 3;
	width: 500 px;
	background-color: #FFFFFF;
	margin: 2px 2px 2px 2px;
	padding: 2px 2px 2px 2px;
	border: 6px solid #42CBDC;
	z-index: 3;
}

#bookingtable {
	position: relative;
	top: 34px;
	z-index: 0;
}

</style>
		<title><s:text name="system.title" /></title>
	</head>
	<body>
		<div id="floatdiv">
			<table>
				<tr>
					<td colspan="3" onmouseover="this.style.cursor='hand'">
						<fieldset  onmouseover="this.style.cursor='hand'">
							<legend style="border-collapse: 3; border-spacing: 4">
								Select Info:<label id="infolabel"></label>
							</legend>
							<input id="entityid" type="hidden" />
							<label>
								Date:
								<input id="seldate" type="text" size="10" readonly="readonly"
									style="border-color: black; border-bottom: 2; border-left: 0; border-right: 0; border-top: 0" />
							</label>
							<label>
								Time:
								<input id="seltime" type="text" size="15" readonly="readonly"
									style="border-color: black; border-bottom: 2; border-left: 0; border-right: 0; border-top: 0" />
							</label>
							<br />
							<label>
								Teacher:
								<input id="selteacher" type="text" size="15" readonly="readonly"
									style="border-color: black; border-bottom: 2; border-left: 0; border-right: 0; border-top: 0" />
								<input id="selteacherid" name="selteacherid" type="hidden" />
							</label>
							<label>
								ClassType:
								<s:select id="classtype" headerKey="" headerValue="--select--"
									list="classTypelist" listKey="id" listValue="name"></s:select>
							</label>
							<br />
							<label>
								ClassFocus:
								<s:select id="classfocus" headerKey="" headerValue="--select--"
									list="classFocuslist" listKey="id" listValue="name"></s:select>
							</label>
							<label>
								Classroom:
								<s:select id="classroom" headerKey="" headerValue="--select--"
									list="classroomlist" listKey="id" listValue="name"></s:select>
							</label>
							<br />
							<label>
								Topic:
								<input type="text" size="50" value="" name="topic" id="topic" />
							</label>
						</fieldset>
					</td>
				</tr>
				<tr>
					<td>
						<input type="button" value="SAVE"    onClick="javascript:doSave();" />
						<input type="button" value="DELETE"
							onclick="javascript:doDelete();" />
					</td>
					<td>
						<input type="button" value="CLOSE WINDOW"
							onclick="window.close();" />
					</td>
				</tr>
			</table>
		</div>
		<div id="topdiv">
			<s:form action="beforeBooking" method="post">
				<table border="0" cellpadding="0" cellspacing="1" class="box2" width="100%" style="table-layout: fixed;">
					<s:hidden name="id" />
					<tr height="36px">
						<td width="157" class="tablecolour9">
							Year:
							<s:property value="year" />
							&nbsp; Week:
							<s:property value="week" />
						</td>
						<s:iterator value="teachers">
							<td width="100" class="tablecolour9">
								<s:property value="name" />
							</td>
						</s:iterator>
					</tr>
				</table>
			</s:form>
		</div>
		<div id="leftdiv">
			<table width="160" border="0" cellpadding="0" cellspacing="1" class="box2">
				<s:iterator value="days" status="st">
					<tr>
						<s:if test="#st.index%10==0">
							<td rowspan="10" bgcolor="#FFFFFF" width="80"
								style="word-wrap: break-word; word-break: break-all;border-bottom:2px solid #CAE1F9" 
								 <s:if test="#st.index%20==0">class="tablecolour10"</s:if>
								 <s:else>class="tablecolour11"</s:else>>
								<s:set name="bday" />
								<s:date name="bday" format="E" />
								<br />
								<s:date name="bday" format="yyyy-MM-dd" />
							</td>
						</s:if>
						<td bgcolor="#FFFFFF" width="80"
						    style="<s:if test="#st.index%10==9">border-bottom:2px solid #CAE1F9</s:if>"
						    class="tablecolour10" id="datePanel<s:property value="#st.index"/>">
							<s:property value="getTimeline(#bday).get(#st.index%10)" />
						</td>
					</tr>
				</s:iterator>
			</table>
		</div>
		<%
			int i = 1;
		%>
		<table id="bookingtable" style="table-layout: fixed;"
			width="100%"
             border="0" cellpadding="0" cellspacing="1" class="box2">
			<s:iterator value="days" status="st">
				<tr>
					<s:if test="#st.index==0">
					<td width="157" class="tablecolour12" rowspan="<s:property value="days.size"/>">&nbsp;</td>
					</s:if>
					<s:if test="#st.index%10==0">
						<s:set name="bday" />
					</s:if>
					<s:set name="btime" value="getTimeline(#bday).get(#st.index%10)" />
					<s:iterator value="teachers">
						<td align="center" width="100"  
						    style="background-color:<s:property value="getClassEntityColor(#bday,#btime,id)" />;
						    <s:if test="#st.index%10==9">border-bottom:2px solid #CAE1F9</s:if>"
							title="<s:property value="getClassEntityInfoAll(#bday,#btime,id)" />"
							entityid="<s:property value="getClassEntityId(#bday,#btime,id)" />"
							id="<%=i%>" style="overflow: hidden"
							onclick="javescript:doSelect(<%=i++%>,
							'<s:date name="bday" format="yyyy-MM-dd" />',
	    					'<s:property value="%{#btime}"/>',
	    					'<s:property value="%{id}"/>',
	    					'<s:property value="%{name}"/>');" class="tablecolour12"  onmouseover="selDatePanel('datePanel<s:property value="#st.index"/>');" onmouseout="unselDatePanel('datePanel<s:property value="#st.index"/>');" >
							<s:property value="getClassEntityInfo(#bday,#btime,id)"/>&nbsp;
						</td>
					</s:iterator>
				</tr>
			</s:iterator>
		</table>
	</body>
</html>